<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="30%"
    @close="cancel"
  >
    <!-- 表单 -->
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择" value="1" style="width:100%">
          <el-option
            v-for="item in simpleList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetSimpleList } from '@/api/departments'
import { reqAddDept } from '@/api/departments'
import { reqGetDeptInfoById } from '@/api/departments'
import { reqUpdateDept } from '@/api/departments'
export default {
  name: 'AddDepts',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 点击的部门信息中的id 添加的时候要使用(第五个字段 this.nodeData.id)
    nodeData: {
      type: Object,
      required: true
    },
    sourceDepts: {
      type: Array,
      required: true
    }
  },
  data() {
    // 部门名称的自定义校验规则
    const checkName = (rule, value, cb) => {
      // console.log(value)
      // 禁止添加重复的子部门名称
      // 禁止添加重复的部门名称,所有的比较
      // const boo = this.nodeData.children.some(item => item.name === value)
      // 在编辑状态下 如果点击的部门的名称 和输入框的 名称一致 不要校验
      if (this.form.id && this.nodeData.name === value) return cb()
      const boo = this.sourceDepts.some(item => item.name === value)
      return boo ? cb(new Error(`已经存在${value}部门`)) : cb()
    }
    // 部门编码的自定义校验
    const checkCode = (rule, value, cb) => {
      if (this.form.id && this.nodeData.code === value) return cb()
      // 查找输入的code是否和某个部门的code冲突
      const boo = this.sourceDepts.some(item => item.code === value)
      return boo ? cb(new Error(`已经存在${value}部门编码`)) : cb()
    }
    return {
      // 表单关联的数据
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      // 表单的校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['change', 'blur'] },
          { min: 2, max: 10, message: '部门名称要求2-10个字符', trigger: ['change', 'blur'] },
          { validator: checkName, trigger: ['change', 'blur'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['change', 'blur'] },
          { min: 2, max: 10, message: '部门编码要求2-10个字符', trigger: ['change', 'blur'] },
          { validator: checkCode, trigger: ['change', 'blur'] }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['change', 'blur'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['change', 'blur'] }
        ]
      },
      // 部门负责人列表
      simpleList: [],
      title: '添加部门',
      loading: false
    }
  },
  created() {
    this.getSimpleList()
  },
  methods: {
    // 获取部门负责人列表
    async getSimpleList() {
      const { data } = await reqGetSimpleList()
      // console.log(data)
      this.simpleList = data
    },
    // 点击确定提交表单 新增部门
    handleSubmit() {
      // 新增提交
      // 1,预校验
      this.$refs.form.validate(async boo => {
        if (!boo) return
        if (this.form.id) {
          // console.log('编辑提交')
          // 更新部门的请求
          await reqUpdateDept(this.form)
        } else {
          // 2,新增部门发送请求 (api/department.js)
          await reqAddDept({ ...this.form, pid: this.nodeData.id })
        }
        // 3,通知父组件 (viems/department/index.vue 里的添加部门的对话框 add-depts 接收)关闭对话框重新获取部门列表
        this.$emit('closeDialog')
        // 将form初始化所有字段为空值
        this.form = {
          name: '', // 部门名称
          code: '', // 部门编码
          manager: '', // 部门负责人
          introduce: '' // 部门介绍
        }
      })
    },
    // 点击取消按钮 或 x号 表单消失 同上面3
    cancel() {
      this.$emit('update:visible', false)
      // 重置表单(重置表单规则)
      this.$refs.form.resetFields()
      // 将form初始化所有字段为空值
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
    },
    // 获取部门信息的方法
    async getDeptInfo(id) {
      this.loading = true
      // console.log('获取部门信息')
      // 根据id查询部门详情
      const { data } = await reqGetDeptInfoById(id)
      this.form = data
      this.loading = false
    }
  }
}
</script>

<style>

</style>
